<template>
	<view>
		<u-search  :show-action="false" v-model="searchForm.stitle" @change="inputWord" margin="20rpx 50rpx"></u-search>
		<view>
			<u-swipe-action>
				<view
					v-for="(notify, index) in dataList"
					:key="index">
						<u-swipe-action-item @click="del(notify.uGuid)"  :key="notify.id" :threshold="60" duration="500" 
						:options="options">
						  <u-cell-group>
							  <u-cell @click="toDetail(notify)">
								  <u-avatar slot="icon" icon="bell-fill" fontSize="22" randomBgColor></u-avatar>
								  <view slot="title" class="content">
										<view class="text-bold text-grey">
											<view class="ellipsis-description">
												 标题：{{notify.sTitle}}
											</view>
										</view>
									
										<view class="text-gray text-sm">
											<view class="ellipsis-description">
												发布者：{{notify.sSender }}, {{notify.tSendTime}}
											</view>
										</view>
										<view class="text-sm">
											<view class="ellipsis-description">
												内容：{{notify.sContent}}
											</view>
										</view>
								  </view>
								  <view slot="right-icon">
										<u-tag text="未读" v-if="notify.bReaded === false" plain shape="circle"></u-tag>
										<u-tag text="已读" v-else plain type="error" shape="circle"></u-tag>
								  </view>
								</u-cell>
						  </u-cell-group>
						</u-swipe-action-item>
				</view>
			</u-swipe-action>
		</view>
		<u-loadmore :status="status"  @loadmore="loadmore" :line="true" />
		<u-gap height="100" bgColor="#fff"></u-gap>
		<u-back-top :scrollTop="0" mode="square"></u-back-top>
	</view>
</template>

<script>
  import { mapState } from 'vuex'
	import notifyService from "@/api/notify/notifyService";
	export default {
		data() {
			return {
				status: 'loadmore',
				searchForm: {
					stitle: ''
				},
				dataList: [],
				tablePage: {
					pages: 0,
					currentPage: 0,
					pageSize: 10,
					orders: [{ column: "a.create_time", asc: false }],
				},
				loading: false,
				options: [ {
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		computed: { ...mapState({
			 userInfo: (state) => state.user.userInfo
			}),
		},
		created() {
			this.loadmore();
			setInterval(() => {
				this.loadmore();
			}, 120000)
		},
		methods: {
			// 跳转到详细页面
			toDetail (notify) {
				if (!notify.bReaded) {
					notify.bReaded = true;
					this.$emit("badgeNum");
				}
				uni.navigateTo({
				  url: '/pages/subA/apps/notification/notificationDetail',
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: notify })
					}
				})
			},
			// toEdit (notify) {
			// 	uni.navigateTo({
			// 	  url: '/pages/apps/notification/oaNotifyForm',
			// 		events: {
			// 			someEvent: function(notify) {}
			// 		}
			// 	})
			// },
			toAdd (){
				uni.navigateTo({
				  url: '/pages/subA/apps/notification/oaNotifyForm'
				})
			},
			// 输入监听
			inputWord(e){
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(()=>{
					this.doSearch()
				},300)
			},
			// 搜索
			doSearch(){
				this.dataList = []; 
				this.tablePage.currentPage = 0;
				this.tablePage.pageSize = 10;
				this.tablePage.pages = 0;
				this.loadmore();
			},
			onReachBottom() {
				this.loadmore()
			},
			loadmore() {
				if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
					this.status = 'nomore';
					return;
				}
				this.tablePage.currentPage = ++ this.tablePage.currentPage;
				//联网加载数据
				this.status = 'loading';
				notifyService.getMessageByUserNo({
					userId: this.userInfo.id,
					stitle: this.searchForm.stitle
				}).then(res => {
					// 只取res前10条
					res = res.slice(0, 10);
					this.dataList = this.dataList.concat(res);
					this.status = 'nomore';
					const noReaded = this.dataList.filter(item => item.bReaded === false);
					this.$emit("badgeNum", noReaded.length);
				})
				
				// notifyService.list({
				// 	isSelf: true,
				// 	current: this.tablePage.currentPage,
				// 	size: this.tablePage.pageSize,
				// 	orders: this.tablePage.orders,
				// 	...this.searchForm
				// }).then((data)=>{
				// 	//追加新数据
				// 	this.dataList=this.dataList.concat(data.records);
				// 	this.tablePage.pages = data.pages;
				// 	if(this.tablePage.pages <= this.tablePage.currentPage){
				// 		this.status = 'nomore'
				// 	} else {
				// 		this.status = 'loadmore'
				// 	}
				// })
				
			},
			del (uGuid) {
				notifyService.delete(uGuid).then((data)=>{
					this.doSearch()
					uni.showToast({
						title: data,
						icon:"success"
					})
				})
			},
		}
	}
</script>